<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>f-&gt;OK&lt;-a v2.0</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="resources/jquery-ui-1.8.24.custom.css"/>
	<link rel="stylesheet" href="resources/additional.css"/>
	<link rel="stylesheet" href="resources/jquery.tooltip.css"/>
	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon" />
	<script src="resources/jquery-1.8.2.min.js"></script>
	<script src="resources/jquery-ui-1.8.24.custom.min.js"></script>
	<script src="resources/jquery.tooltip.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
	<script src="logic/logicJS.js"></script>
	<script>
		$(function() {
			logicJS.loadFokarium();
			logicJS.dragFok();
			logicJS.initButtons();
		});
	</script>
	
</head>

<body>
	<script id="fok-row" type="x-moustache">
	<tr name="{{humanName}}" class="record">
		<td class="ui-widget-content humanName" style="padding:20px" name="facet">{{humanName}}</td>
		<td class="ui-widget-content droppableCell" style="width:67px; height:64px; padding: 15px;">
		{{#displayFOK}}
			<img src="resources/images/fOK.png" title=""/>
		{{/displayFOK}}
		{{^displayFOK}}
			<img src="resources/images/fOK.png" style="display:none;"/>
		{{/displayFOK}}
		</td>
		<td class="ui-widget-content fOkCounter" style="padding:20px">{{fokCount}}</td>
		<td class="ui-widget-content commentCell">
			<input name="addComment" class="ui-widget ui-button" type="button" value="Add sth"/>
		</td>
		<td class="ui-widget-content" style="padding:20px"><span class="ui-icon ui-icon-circle-close evaporateResource"></span></td>
	</tr>
	</script>
	
	<div id="evaporateConfirmation" title="?????" style="display:none;">
		<p>Do you REALLY want to evaporate this poor human resource???</p>
	</div>

	<div id="resetConfirmation" title="?????" style="display:none;">
		<p>Do you REALLY want to destroy this beautiful stats???</p>
	</div>

	<div id="comment-form" title="Add comment" style="display:none;">
		<form>
			<fieldset>
				<label for="comment">This fOK is for:</label> 
				<input type="textarea" style="width: 250px; height: 90px; padding: 0" 
				wrap="virtual" name="comment" id="comment" value="" class="ui-widget-content ui-corner-all" />
			</fieldset>
		</form>
	</div>

	<div class="ui-widget main">
		<div class="ui-widget-header"><h1>ODT fOKa v2.0</h1></div>
		<br/><br/>
		<div class="ui-widget" id="fokarium" style="position:relative;float:left;margin-right: -210px;">
			<table class="ui-widget-content">
				<thead id="header" class="ui-widget-header">
					<tr>
						<th style="padding:10px">Human resource</th>
						<th style="padding:10px">fOK</th>
						<th style="padding:10px">fOK counter</th>
						<th style="padding:10px">Comment</th>
						<th></th>
					</tr>
				</thead>
				<tbody class="ui-widget-content">
				</tbody>
			</table>
		</div><br/>
		
		<div class="ui-widget" id="form" style="float:right;">
			<table class="ui-widget-content" style="padding: 40px;">
				<tr name="fOk">
					<td>
						<p class="ui-content-header">Drag ----------------></p>
						<br/>
					</td>
					<td>
						<div id="zoo">
							<div class="draggableFok" style="width:67px; height:64x; float:left">
								<img src="resources/images/fOK.png" />
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<p class="ui-content-header">New human resource</p><input id="humanRsrc" type="text" class="ui-widget"/>
						<br/><br/><br/><br/>
					</td>
					<td>
						<input type="button" class="ui-widget ui-button" id="add" value="Add"/>
					</td>
				</tr>
				
				<tr>
					<td>
						<p class="ui-content-header">Click to destroy ---></p>
					</td>
					<td>
						<input type="button" class="ui-widget ui-button" id="reset" value="Reset ALL"/>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>